<template>
  <div class="main-container">
    <div class="back" @click="historyBack">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-diary-xiazai6"></use>
      </svg>
    </div>
    <div class="active">
      <div class="active-main">
        <div class="active-banner flex-box">
          <img src="../../assets/img/img-find/618-a08.png" alt="" class="sharp">
          <img src="../../assets/img/img-find/huada-logo.png" alt="" class="huada-logo">
          <div class="banner-main">
            <img class="banner-img2" src="../../assets/img/img-find/618-a02.png" alt="">
            <img class="banner-img3" src="../../assets/img/img-find/618-a03.png" alt="">
            <img class="banner-img4" src="../../assets/img/img-find/618-a04.png" alt="">
            <img class="banner-img5" src="../../assets/img/img-find/618-a05.png" alt="">
            <img class="banner-img6" src="../../assets/img/img-find/618-a06.png" alt="">
            <img class="banner-img7" src="../../assets/img/img-find/618-a07.png" alt="">
            <img class="banner-img10" src="../../assets/img/img-find/618-a10.png" alt="">
          </div>
        </div>
        <h5><span>预热时间：</span>5.30-6.6    <span>活动时间：</span>6.7-6.20</h5>
        <div class="lipin lipin-a">
          <div class="lp-title"><h3><span>一重礼:</span> 华小米兑换券</h3></div>
          <div class="lipin-a-main">
            <div class="lipin-a-main-inner">
              <img src="../../assets/img/img-find/618-a11.png">
              <p>活动期间购买任意产品即可凭此券兑换400g华小米一袋</p>
              <button id="get-pre">领取</button>
            </div>
          </div>
        </div>
        <div class="lipin lipin-b">
          <div class="lp-title"><h4><span>二重礼:</span> 8款正装试用，不来虚的</h4></div>
          <div class="lipin-b-main">
            <p>每天一款商品开放试用</p>
            <img id="goods-show" src="img/618-gooods_01.png" alt="">
            <p><span>今日试用：</span><i id="goods-show-name">益健儿童孕妇肠道益生菌  ￥158.0</i></p>
            <button id="share">分享赢免费试用资格</button>
            <div class="goods-box">
              <ul>
                <li v-for="(item, index) in lists" :key="index">
                  <div class="goods-box-lists" :class="{active:index===1,past:index<1}" id="goods-a01">
                    <div class="des-box">
                      <p>{{item.name}}</p>
                      <div class="des-box-ff flex-box">
                        <h6>{{item.number}}份<br><span>价值:{{item.price}}</span></h6>
                      </div>
                      <p>{{item.date}}</p>
                    </div>
                    <img v-lazy="require('../../assets/img/img-find/' + item.img)">
                  </div>
                </li>
                <li>
                  <div class="goods-box-lists future">
                    <div class="flex-box active-start">
                      <h1>
                        6月7日<br>活动开始 ...
                      </h1>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <button id="check-more">进入活动主页 提前锁定低价</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'FindDetail',
  data() {
    return {
      lists: [
        {
          name: '益健益生菌',
          number: '30',
          price: '￥158',
          date: '5月30日',
          img: '618-gooods_01.png'
        },
        {
          name: '鲟鱼罐头*2',
          number: '30',
          price: '￥39.6',
          date: '5月31日',
          img: '618-gooods_02.png'
        },
        {
          name: '黑猪肉松25g*2',
          number: '30',
          price: '￥33.6',
          date: '6月1日',
          img: '618-gooods_03.png'
        },
        {
          name: '印加果洁面慕斯',
          number: '30',
          price: '￥168',
          date: '6月2日',
          img: '618-gooods_04.png'
        },
        {
          name: '华大优选南瓜籽',
          number: '30',
          price: '￥38',
          date: '6月3日',
          img: '618-gooods_05.png'
        },
        {
          name: '华大宝膳脆香菇',
          number: '30',
          price: '￥30',
          date: '6月4日',
          img: '618-gooods_06.png'
        },
        {
          name: '益畅益生菌',
          number: '30',
          price: '￥168',
          date: '6月5日',
          img: '618-gooods_07.png'
        },
        {
          name: '密蜜女性益生菌',
          number: '30',
          price: '￥298',
          date: '6月6日',
          img: '618-gooods_08.png'
        }
      ]
    }
  },
  components: {},
  methods: {
    historyBack() {
      this.$router.go(-1)
    }
  },
  mounted() {}
}
</script>
<style scoped lang="scss">
.main-container {
  width: 100%;
  height: 100%;
  text-align: left;
  .back {
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #fff;
    font-size: 16px;
    color: #333;
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 666;
  }
}
@font-face {
  font-family: 'fzltcxhjt';
  src: url('../../assets/fonts/fzltcxhjt.TTF');
  font-weight: normal;
  font-style: normal;
}
.active {
  max-width: 750px;
  margin: 0 auto;
  background: #33d5bd;
  padding-bottom: 24px;
  .active-main {
    width: 100%;
    position: relative;
    .active-banner {
      width: 100%;
      height: 225px;
      background: url(../../assets/img/img-find/618-a01.png) center top no-repeat;
      background-size: 100%;
      position: relative;
      .sharp {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        animation: bounceIn 0.35s ease-in-out 2s both;
        -webkit-animation: bounceIn 0.35s ease-in-out 2s both;
      }
      .huada-logo {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 60px;
      }
      .banner-main {
        width: 258px;
        height: 145px;
        margin-left: -23px;
        position: relative;
        animation: kwFloat 8s ease-in-out 2.5s infinite both;
        -webkit-animation: kwFloat 8s ease-in-out 2.5s infinite both;
        img {
          position: absolute;
        }
        .banner-img2 {
          width: 102.5px;
          top: 10px;
          left: 16px;
          z-index: 3;
          animation: fadeInRight 0.5s ease-in-out 0.7s both;
          -webkit-animation: fadeInRight 0.5s ease-in-out 0.7s both;
        }
        .banner-img3 {
          width: 77px;
          top: 22px;
          left: 122px;
          z-index: 3;
          animation: fadeInRight 0.5s ease-in-out 1s both;
          -webkit-animation: fadeInRight 0.5s ease-in-out 1s both;
        }
        .banner-img4 {
          width: 176px;
          top: 61px;
          left: 67px;
          z-index: 3;
          animation: fadeInLeft 0.5s ease-in-out 1.3s both;
          -webkit-animation: fadeInLeft 0.5s ease-in-out 1.3s both;
        }
        .banner-img5 {
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 2;
          animation: zoomIn 0.35s ease-in-out 0.5s both;
          -webkit-animation: zoomIn 0.35s ease-in-out 0.5s both;
        }
        .banner-img6 {
          width: 125px;
          top: 86px;
          left: -30px;
          z-index: 1;
          animation: bounceInLeft 0.35s ease-in-out 0.8s both;
          -webkit-animation: bounceInLeft 0.35s ease-in-out 0.8s both;
        }
        .banner-img7 {
          width: 117px;
          top: 80px;
          left: 208px;
          z-index: 1;
          animation: bounceInRight 0.35s ease-in-out 0.9s both;
          -webkit-animation: bounceInRight 0.35s ease-in-out 0.9s both;
        }
        .banner-img10 {
          width: 146px;
          top: 131px;
          left: 53px;
          z-index: 1;
          animation: bounceInUp 0.85s ease-in-out 2s both;
          -webkit-animation: bounceInUp 0.85s ease-in-out 2s both;
        }
      }
    }
    h5 {
      font-family: 'fzltcxhjt';
      font-size: 16px;
      line-height: 24px;
      text-align: center;
      margin-bottom: 9px;
      span {
        font-weight: bold;
      }
    }
    .lipin {
      width: 100%;
      .lp-title {
        width: 86%;
        margin-left: 8%;
        height: 42px;
        line-height: 42px;
        font-family: 'fzzdhjt';
        background: url(../../assets/img/img-find/618-a09.png) center no-repeat;
        background-size: 100% 100%;
        color: #fff;
        text-align: center;
        margin-bottom: 14px;
        h3 {
          font-size: 20px;
          span {
            color: #fdf42f;
          }
        }
        h4 {
          font-size: 16px;
          span {
            color: #fdf42f;
          }
        }
      }
      .lipin-a-main {
        width: 90%;
        margin-left: 5%;
        border: 1px solid #9febe0;
        border-radius: 4px;
        padding: 8px;
        box-sizing: border-box;
        margin-bottom: 22px;
        .lipin-a-main-inner {
          width: 100%;
          height: 100%;
          background: #70e5d4;
          border-radius: 4px;
          padding: 8px;
          overflow: hidden;
          box-sizing: border-box;
          img {
            width: 102px;
            float: left;
            margin-right: 8px;
          }
          p {
            font-family: 'fzltcxhjt';
            font-size: 14px;
            line-height: 21px;
            width: 186px;
            margin-top: 12px;
            font-weight: bold;
            float: left;
          }
          button {
            border: none;
            outline: none;
            background: #f9f02b;
            color: #000;
            border-radius: 4px;
            padding: 4px 20px;
            margin-top: 12px;
            font-size: 14px;
            font-weight: bold;
            float: left;
          }
        }
      }
      .lipin-b-main {
        width: 100%;
        text-align: center;
        p {
          font-family: 'fzltcxhjt';
          font-size: 16px;
          display: inline-block;
          font-weight: bold;
          line-height: 24px;
          width: 80%;
          color: #000;
          margin-top: 6px;
          margin-bottom: 6px;
          span {
            font-weight: bold;
            color: #f54129;
          }
        }
        & > img {
          width: 155px;
        }
        #share {
          width: 238px;
          height: 45px;
          line-height: 43px;
          background: url(../../assets/img/img-find/618-a12.png) center no-repeat;
          background-size: 100% 100%;
          border: none;
          box-sizing: border-box;
          font-family: 'fzzdhjt';
          font-size: 20px;
          color: #fff;
          margin-bottom: 14px;
        }
        .goods-box {
          width: 90%;
          margin-left: 5%;
          border: 1px solid #9febe0;
          border-radius: 4px;
          padding: 8px;
          box-sizing: border-box;
          margin-bottom: 22px;
          ul {
            width: 100%;
            height: 100%;
            background: #70e5d4;
            border-radius: 4px;
            display: block;
            padding: 8px;
            overflow: hidden;
            box-sizing: border-box;
            li {
              width: 33.33%;
              height: 100px;
              float: left;
              box-sizing: border-box;
              padding: 4px;
              .goods-box-lists {
                width: 100%;
                height: 100%;
                background: #95efe2;
                box-sizing: border-box;
                position: relative;
                img {
                  width: 80%;
                  height: 80%;
                  margin: 10%;
                }
                .des-box {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  top: 0;
                  left: 0;
                  p {
                    width: 100px;
                    font-size: 11px;
                    color: #000;
                    margin-left: -3px;
                    line-height: 12px;
                    font-weight: bold;
                  }
                  .des-box-ff {
                    width: 47px;
                    height: 47px;
                    margin-left: 21.5px;
                    border-radius: 100px;
                    background: rgba($color: #000000, $alpha: 0.7);
                    p,
                    h6 {
                      color: #fff;
                      font-family: 'fzltcxhjt';
                      font-weight: bold;
                      font-size: 12px;
                      white-space: nowrap;
                    }
                    h6 {
                      color: #f9f02b;
                      span {
                        font-size: 8px;
                        line-height: 16px;
                      }
                    }
                  }
                }
              }
              .past {
                background: #bfbfbf;
                .des-box {
                  background: rgba($color: #ffffff, $alpha: 0.7);
                }
              }
              .active {
                background: #f9f02b;
              }
              .future {
                background: #95efe2;
                .des-box {
                  .des-box-ff {
                    background: rgba($color: #ffffff, $alpha: 0.7);
                    h6 {
                      color: #000000;
                    }
                  }
                }
              }
            }
            .active-start {
              width: 100%;
              height: 100%;
              h1 {
                font-size: 12px;
                color: #000;
                white-space: nowrap;
              }
            }
          }
        }
        #check-more {
          padding: 4px 16px;
          font-size: 14px;
          line-height: 24px;
          background: #f9f02b;
          color: #000;
          border-radius: 4px;
          border: none;
          outline: none;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
